<template>
	<view class="content">
		<view class="banner">
			<u-swiper bg-color="transparent" name="showurl" :list="banner"></u-swiper>
		</view>
		<view class="nav_list">
			<view class="item" @click="go('ForwardContract')">
				<view class="title">正向合约</view>
				<view class="des">BTC开盘价正向竞猜</view>
				<view class="title">进入合约></view>
			</view>
			<view class="item" @click="go('ReverseContract')">
				<view class="title">反向合约</view>
				<view class="des">BTC开盘价反向竞猜</view>
				<view class="title">进入合约></view>
			</view>
		</view>
		<view class="chartsTitle">
			今日走势图
		</view>
		<view class="switch">
			<view :class="{active:active==1}" @click="changeType(1)">线型图</view>
			<view :class="{active:active==2}" @click="changeType(2)">柱状图</view>
		</view>
		<view class="qiun-charts">
			<canvas 
			canvas-id="canvasColumn" 
			id="canvasColumn" 
			class="charts" 
			disable-scroll=true 
			@touchstart="touchCandle"
			@touchmove="moveCandle" 
			@touchend="touchEndCandle"
			></canvas>
		</view>
		<Nav :current='navActive'></Nav>
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	import Nav from '../../component/Nav.vue'
	var _self;
	var canvaColumn = null;
	export default {
		components:{
			Nav
		},
		data() {
			return {
				active:2,
				banner: [],
				navActive:1,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				switchType:true,
				type:'column',//area线性图，column柱形图
			}
		},
		onReady() {},
		onLoad() {
			this.getBanner()
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		onPullDownRefresh(){
			this.getBanner()
			this.getServerData()
		},
		methods: {
			//获取banner
			getBanner(){
				this.$http({
					url:this.$api.banner_getAll,
					method:'POST',
					hideLoading:false,
					data:{
						page:1,
						list_rows:6,
					},
					success:res=>{
						this.banner = res.data.data
						
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
				//console.log('banner',this.banner)
			},
			//图形切换
			changeType(e){
				//console.log(e)
				if(this.switchType){
					this.active = e
					if(e==2){
						this.switchType = false
						this.type = 'column'
						this.getServerData()
					}
					if(e==1){
						this.switchType = false
						this.type = 'area'
						this.getServerData()
					}
				}
				
			},
			//跳转
			go(e){
				uni.navigateTo({
				    url: `./${e}`
				});
			},
			//时间格式化
			dateFormat(e){
				let date = e
				let Y = date.getFullYear()
				let M = date.getMonth() + 1
				let D = date.getDate()
				let m = date.getMinutes()
				let h = date.getHours()
				let s = date.getSeconds()
				if (M < 10) {
				    M = `0${M}`
				}
				if (D < 10) {
				    D = `0${D}`
				}
				if (h<10) {
				    h = `0${h}`
				}
				if (m<10) {
				    m = `0${m}`
				}
				if (s<10) {
				    s = `0${s}`
				}
				return `${Y}-${M}-${D} ${h}:${m}:${s}`
			},
			//获取统计数据
			getServerData() {
				let startTime = new Date(new Date().getTime() - 40*60*1000)
				let endTime = new Date()
				this.$http({
					url:this.$api.kjdrawlog_getAll,
					method:'POST',
					hideLoading:false,
					data:{
						endtime:this.dateFormat(endTime),
						starttime:this.dateFormat(startTime),
					},
					success:res=>{
						let Column = {
							categories: [],
							series: []
						};
						Column.categories = res.data.map(item=>{
							return item.create_time
						})
						let data = res.data.map(item=>{
							return item.num
						})
						Column.series = [{name:'',data:data}]
						
						this.showColumn("canvasColumn", Column);
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
					
				})
				
			},
			//渲染统计图
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: _self.type,
					legend: {
						show: false,//是否隐藏图列
						fontColor:'#6279f9',//图列颜色
					},
					fontSize: 10,
					background:'transparent',
					colors:['#6279f9'],
					pixelRatio: _self.pixelRatio,
					animation: true,
					enableScroll: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						itemCount:8,
					},
					yAxis: {
						gridColor:'#242539',//Y轴网格线颜色
						max:1100,
						min:0
					},
					dataLabel: true,//是否隐藏数据点标识
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				});
				setTimeout(()=>{
					this.switchType = true
				},1000)
			},
			//触摸滑动图表
			touchCandle(e){
				canvaColumn.scrollStart(e);
			},
			moveCandle(e) {
				canvaColumn.scroll(e);
			},
			touchEndCandle(e) {
				canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.banner {
			margin: 80rpx 0 40rpx 0;
		}
		.nav_list {
			margin: 0 28rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 48%;
				padding: 20rpx 0;
				background-color:#0cdda9;
				text-align: center;
				border-radius: 15rpx;
				
				.title {
					font-weight: 600;
					color: #ffffff;
					letter-spacing: 1px;
				}

				.des {
					font-size: 12px;
					color: #181a2b;
					line-height: 30rpx;
				}
			}
			.item:nth-child(2){
				background-color: #f45a68;
			}
		}
		.chartsTitle{
			font-size: 16px;
			color: #FFFFFF;
			margin: 60rpx 40rpx 10rpx 40rpx;
		}
		.qiun-charts{
			background-color: transparent;
			width: 95%;
			margin: 0rpx auto;
			.charts{
				width: 100%;
				height:500upx;
				background-color: transparent;
			}
		}
		.switch{
			margin: 20rpx 40rpx 40rpx 40rpx;
			display: flex;
			justify-content:flex-end;
			>view{
				width: 116rpx;
				color: #FFFFFF;
				padding: 5rpx;
				margin-left: 18rpx;
				background-color: #302851;
				text-align: center;
				border-radius: 10rpx;
			}
			.active{
				background-color:#5e6afc
			}
		}
		::v-deep .u-swiper-indicator{
			bottom: 14px!important;
		}
	}
</style>
